﻿<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/animate.min.css">
<link rel="stylesheet" href="/css/main.css">
	<style type="text/css">
 .box{
        width: 600px;
        margin: 10px auto;
        font-family: 'Microsoft YaHei';
        font-size: 14px;
    }
    #input{
        width: 520px;
        border: 1px solid #e2e2e2;
        height: 35px;
        float: left;
        background-image: url(images/search.jpg);
        background-repeat: no-repeat;
        background-size: 25px;
        background-position:5px center;
        padding:0 0 0 40px;
    }
    #search{
        width: 80px;
        height: 38px;
        float: right;
        background: black;
        color: white;
        text-align: center;
        line-height: 38px;
        cursor: pointer;
    }
</style>
</head>
<body>
<section id="navbar">
		<nav class="navbar navbar-default navbar-fixed-top">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed"
						data-toggle="collapse" data-target="#bs" aria-expanded="false">
						<span class="sr-only"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span> <span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">华为商城</a>
				</div>
<form action="/search" method="post">
   <div class="box">
        <input type="text" id="input" placeholder="请输入关键字" name="goodsName">
        <input type="submit" id="search"  value="搜索">
    </div>
 </form>
				<div class="collapse navbar-collapse" id="bs">
					<ul class="nav navbar-nav navbar-right">
     
					<li><a href="/index">首页</a></li>
					<#if loginuser??>
						<li><a>欢迎你，${(loginuser.userName)!}</a></li>
						<li><a href="/showorder">我的订单</a></li>
						<#else>
						<li><a href="/login">用户登录 </a></li>
						<li><a href="/register">用户注册</a></li>
					</#if>
						<li><a href="/cart/show"><span
								class="glyphicon glyphicon-shopping-cart"></span> 购物车(3)</a></li>
					</ul>
				</div>
			</div>
		</nav>
	
	<div id="myCarousel" class="carousel slide">
		<!-- 轮播（Carousel）指标 -->
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
		</ol>
		<!-- 轮播（Carousel）项目 -->
		<div class="carousel-inner">
			<div class="item active">
				<img src="${(advertone)!}" alt="First slide">
				<div class="carousel-caption">
					
					<p></p>
				</div>
			</div>
			<div class="item">
				<img src="${(adverttwo)!}" alt="Second slide">
				<div class="carousel-caption">
					
					<p></p>
				</div>
			</div>
			<div class="item">
				<img src="${(advertthree)!}" alt="Third slide">
				<div class="carousel-caption">
					
					<p></p>
				</div>
			</div>
		</div>
		<!-- 轮播（Carousel）导航 -->
		<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
		<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
	</div>

	<section id="goods">
		<div class="container">
			<div class="row " >
				<#if list??>
					<#list list as g>
						<div class="col-sm-3">
							<div class="cp wow fadeIn" data-wow-delay="1s">
								<img src="${(g.goodsUrl)!}" style="width:100px;height:150px;object-fit:contain">
								<h4 class="title">${(g.goodsName)}</h4>
								<p class="desc">${(g.goodsIntro)}</p>
								<p class="price">￥${(g.goodsPrice)}</p>
								<a href="/goodsinfo/${(g.goodsId)}" class="btn btn-primary">点击查看</a>
							</div>
						</div>
					</#list>
				</#if>
			</div>
		</div>
	</section>

	<section id="contact">
		<div class="bg">
			<div class="container">
				<div class="row ">
					<div class="col-sm-6  wow fadeInLeft">
						<h2>
							<span class="glyphicon glyphicon-earphone"></span> 联系我们
						</h2>
						<p>
							华为商城成立于2020年01月01日，主要业务充电宝、充电宝、充电宝、充电宝充电宝、充电宝、充电宝、充电宝、充电宝、充电宝</p>
						<address>
							<p>
								<span class="glyphicon glyphicon-home"></span>
								北京XXXXX街XXX路纳尼亚大厦23-6
							</p>
							<p>
								<span class="glyphicon glyphicon-phone-alt"></span>
								联系电话：010-45678411
							</p>
							<p>
								<span class="glyphicon glyphicon-envelope"></span>
								电子邮件：12345678@qq.com
							</p>
						</address>

					</div>
					<div class="col-sm-6  wow fadeInRight">
						<form method="post">
							<div class="col-md-6">
								<input type="text" class="form-control" placeholder="请输入您的姓名">
							</div>
							<div class="col-md-6">
								<input type="text" class="form-control" placeholder="请输入您的电子邮件">
							</div>
							<div class="col-md-12">
								<input type="text" class="form-control" placeholder="标题">
							</div>
							<div class="col-md-12">
								<textarea placeholder="留言内容" rows="4" class="form-control"></textarea>
							</div>
							<div class="col-md-8">
								<input type="submit" value="提交信息" class="form-control">
							</div>
						</form>


					</div>
				</div>
			</div>
		</div>
	</section>
	<footer>
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<p>版权所有：老朱</p>
				</div>
			</div>
		</div>
	</footer>
	<script type="text/javascript" src="/js/jquery.min.js"></script>
	<script type="text/javascript" src="/js/bootstrap.js"></script>
	<script type="text/javascript" src="/js/wow.min.js"></script>
	<script type="text/javascript">
	 new WOW().init();
	</script>
</body>
</html>